<template>
  <div>
    <button @click="isshow = !isshow">点击显示或隐藏</button>
    <!--应用场景:
    如果需要频繁切换显示隐藏,推荐使用 v-show
    如果不需要频繁切换,推荐使用v-if
     -->
     <!-- v-show :控制样式 display:none  页面上是有这个元素的-->
    <div style="background-color: red" v-show="isshow">盒子1</div>
    <!-- v-if :控制元素的创建或者删除  页面上添加或者删除这个元素-->
    <div style="background-color: pink" v-if="isshow">盒子2</div>
    <!-- v-if 中间不可以写其他元素 注释除外 -->
    <p v-if="age>18">我成年了</p>
    <p v-else>还得多吃饭</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: true,
      age:18
    };
  },
  methods: {},
};
</script>

<style>
div {
  height: 300px;
  width: 300px;
  margin-top: 20px;
}
</style>